<template>
  <el-drawer
    :model-value="isShowOrderDetail"
    :title="$t('订单详情')"
    size="30%"
    @close="emit('close')"
  >
    <div v-loading="loading">
      <div class="flex items-start justify-between mb-4">
        <span class="rowName">{{ $t("订单状态") }}</span>
        <span class="rowValue">
          <el-tag :type="getOrderStatusName(detailInfo.order_status)?.type">{{
            getOrderStatusName(detailInfo.order_status)?.name
          }}</el-tag>
        </span>
      </div>
      <h2 style="font-size: 1.2rem" class="font-semibold">
        {{ detailInfo.sg }} {{ numberToCurrencyNo(detailInfo.amount) }}
        {{ detailInfo.currency }}
      </h2>
      <el-divider />
      <!-- 付款 -->
      <div v-if="tradeType === 2">
        <h4 class="mb-4">{{ $t("付款信息") }}</h4>
        <div
          v-for="(item, index) in payInfo"
          :key="index"
          class="flex items-start justify-between mb-4"
          v-show="item.isShow"
        >
          <span class="rowName">{{ item.name }}</span>
          <span class="rowValue">{{ item.value }}</span>
        </div>
        <h4 class="mb-4">{{ $t("收款信息") }}</h4>
        <div
          v-for="(item, index) in receiveInfo"
          :key="index"
          class="flex items-start justify-between mb-4"
          v-show="item.isShow"
        >
          <span class="rowName">{{ item.name }}</span>
          <span class="rowValue">{{ item.value }}</span>
        </div>
      </div>
      <!-- 充值 -->
      <div v-if="tradeType === 0">
        <h4 class="mb-4">{{ $t("详情") }}</h4>
        <div>
          <div
            v-for="(item, index) in rechargeInfo"
            :key="index"
            class="flex items-start justify-between mb-4"
            v-show="item.isShow"
          >
            <span class="rowName">{{ item.name }}</span>
            <span class="rowValue">{{ item.value }}</span>
          </div>
        </div>
      </div>
      <!-- 收款 -->
      <div v-if="tradeType === 1">
        <h4 class="mb-4">{{ $t("详情") }}</h4>
        <div>
          <div
            v-for="(item, index) in infoDetailList"
            :key="index"
            class="flex items-start justify-between mb-4"
            v-show="item.isShow"
          >
            <span class="rowName">{{ item.name }}</span>
            <span class="rowValue">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref, watch, computed, reactive } from "vue";
import { GetVaTransactionDetail } from "@/api/VAAccount";
import { dayjs } from "element-plus";
import { numberToCurrencyNo } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  isShowOrderDetail: {
    type: Boolean,
    default: false,
  },
  orderNo: {
    type: String,
    default: "",
  },
  tradeType: {
    type: Number,
    default: 0,
  },
  from: {
    type: String,
    default: "records",
  },
});
const emit = defineEmits(["close"]);

const loading = ref(false);

watch(
  () => props.orderNo,
  (val) => {
    if (val) {
      getOrderDetail();
      //   createForm.record_id = val;
    }
  },
  { immediate: true }
);

const detailInfo = reactive({});
const pendingOrderStatus = ref([
  { key: 0, name: `${t("充值")}`, type: "success" },
  { key: 1, name: `${t("收款")}`, type: "warning" },
  { key: 2, name: `${t("付款")}`, type: "danger" },
]);

const payInfo = computed(() => {
  let arr = [
    {
      name: `${t("V-类型")}`,
      value: pendingOrderStatus.value?.find(
        (i) => i.key === detailInfo.trade_type
      )?.name,
      isShow: true,
    },
    {
      name: `${t("付款账户")}`,
      value: detailInfo.send_card_number || "--",
      isShow: true,
    },
    {
      name: `${t("付款金额")}`,
      value: detailInfo.amount || "--",
      isShow: true,
    },
    {
      name: `${t("VA-订单号")}`,
      value: detailInfo.order_no || "--",
      isShow: true,
    },
    {
      name: `${t("发起时间")}`,
      value: detailInfo.create_time
        ? dayjs(detailInfo.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
        : "--",
      isShow: true,
    },
    {
      name: `${t("VA-完成时间")}`,
      value: detailInfo.finish_time
        ? dayjs(detailInfo.finish_time * 1000).format("YYYY-MM-DD HH:mm:ss")
        : "--",
      isShow: true,
    },
  ];
  return arr;
});

const receiveInfo = computed(() => {
  let arr = [
    {
      name: `${t("付款人")}`,
      value: pendingOrderStatus.value?.find(
        (i) => i.key === detailInfo.trade_type
      )?.name,
      isShow: true,
    },
    {
      name: `${t("VA-银行账号")}`,
      value: detailInfo.receive_card_number || "--",
      isShow: true,
    },
    {
      name: `${t("银行所在国家")}`,
      value: detailInfo.receive_bank_country || "--",
      isShow: true,
    },
    {
      name: `${t("银行名称")}`,
      value: detailInfo.receive_bank || "--",
      isShow: true,
    },
    {
      name: `${t("银行地址")}`,
      value: detailInfo.receive_bank_address || "--",
      isShow: true,
    },
    {
      name: `${t("银行账户名称")}`,
      value: detailInfo.receive_card_name || "--",
      isShow: true,
    },
    {
      name: `${t("持卡人国家")}`,
      value: detailInfo.receive_card_country || "--",
      isShow: true,
    },
    {
      name: `${t("持卡人地址")}`,
      value: detailInfo.receive_card_address || "--",
      isShow: true,
    },
    {
      name: `${t("收款币种")}`,
      value: detailInfo.currency || "--",
      isShow: true,
    },
  ];
  return arr;
});

const rechargeInfo = computed(() => {
  let arr = [
    {
      name: `${t("订单类型")}`,
      value: pendingOrderStatus.value?.find(
        (i) => i.key === detailInfo.trade_type
      )?.name,
      isShow: true,
    },
    {
      name: `${t("充值方式")}`,
      value: "KVB",
      isShow: true,
    },
    {
      name: `${t("充值金额")}`,
      value: `${detailInfo.sg} ${detailInfo.amount}` || "--",
      isShow: true,
    },
    {
      name: `${t("充值币种")}`,
      value: detailInfo.currency || "--",
      isShow: true,
    },
    {
      name: `${t("收款账户")}`,
      value: detailInfo.receive_card_number || "--",
      isShow: true,
    },
    {
      name: `${t("付款账户")}`,
      value: detailInfo.send_card_number || "--",
      isShow: true,
    },
    {
      name: `${t("订单号")}`,
      value: detailInfo.order_no || "--",
      isShow: true,
    },
    {
      name: `${t("发起时间")}`,
      value: detailInfo.create_time
        ? dayjs(detailInfo.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
        : "--",
      isShow: true,
    },
    {
      name: `${t("VA-完成时间")}`,
      value: detailInfo.finish_time
        ? dayjs(detailInfo.finish_time * 1000).format("YYYY-MM-DD HH:mm:ss")
        : "--",
      isShow: true,
    },
  ];
  return arr;
});

const infoDetailList = computed(() => {
  let arr = [
    {
      name: `${t("V-类型")}`,
      value: pendingOrderStatus.value?.find(
        (i) => i.key === detailInfo.trade_type
      )?.name,
      isShow: true,
    },
    {
      name: `${t("收款币种")}`,
      value: detailInfo.currency || "--",
      isShow: true,
    },
    {
      name: `${t("收款金额")}`,
      value: `${detailInfo.sg} ${detailInfo.amount}` || "--",
      isShow: true,
    },
    {
      name: `${t("付款人姓名")}`,
      value: detailInfo.payer_data?.name || "--",
      isShow: true,
    },
    {
      name: `${t("付款人邮箱")}`,
      value: detailInfo.payer_data?.email || "--",
      isShow: true,
    },
    {
      name: `${t("付款人手机号")}`,
      value: detailInfo.payer_data?.phone || "--",
      isShow: true,
    },
    {
      name: `${t("付款人国家")}`,
      value: detailInfo.payer_data?.country || "--",
      isShow: true,
    },
    {
      name: `${t("付款人城市")}`,
      value: detailInfo.payer_data?.city || "--",
      isShow: true,
    },
    {
      name: `${t("付款人地址")}`,
      value: detailInfo.payer_data?.address || "--",
      isShow: true,
    },
    {
      name: `${t("流水号")}`,
      value: detailInfo.order_no || "--",
      isShow: true,
    },
    {
      name: `${t("收款时间")}`,
      value: detailInfo.create_time
        ? dayjs(detailInfo.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
        : "--",
      isShow: true,
    },
  ];
  return arr;
});

const getOrderDetail = async () => {
  try {
    loading.value = true;
    const res = await GetVaTransactionDetail({
      order_no: props.orderNo,
    });
    if (res) {
      for (const item in res) {
        detailInfo[item] = res[item];
      }
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};

const orderStatus = ref([
  { key: 0, name: "Awaiting Payment", type: "warning" },
  { key: 1, name: "success", type: "success" },
  { key: 2, name: "fail", type: "danger" },
  { key: 3, name: "Cancel", type: "info" },
]);

const getOrderStatusName = (status) => {
  if (status > -1) {
    return orderStatus.value.find((i) => status === i.key);
  }
};
</script>
<style lang="scss" scoped>
.rowName {
  min-width: 30%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #777;
  margin-bottom: 2%;
}

.rowValue {
  word-break: break-all;
  text-align: right;
}
</style>
